<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-09-07 16:09:50
 * @LastEditors: voanit
 * @LastEditTime: 2022-09-07 17:51:46
-->
<script setup name="XtxBreadItem">
/* XtxBreadItem */
defineProps({
  path: {
    type: String,
  },
});
import { inject } from "vue";
const separator = inject("separator");
</script>
<template>
  <div class="bread-item">
    <router-link v-if="path" to="/"><slot></slot></router-link>
    <template v-else>
      <slot></slot>
    </template>
    <span v-if="separator" style="margin: 0 10px">{{ separator }}</span>
    <span v-else style="margin: 0 10px">/</span>
  </div>
</template>
<style lang="less" scoped>
.bread-item {
  &:hover {
    a {
      color: #00ff00;
    }
  }
  &:nth-last-child(1) {
    span {
      display: none;
    }
  }
}
</style>
